<template>
  <div>
    <component :is="mode"></component>
  </div>
</template>

<!-- 首页 -->
<script>
import scriptLoad from '@/utils/scriptLoad'
export default {
  name: 'Home',
  components: {},
  props: {},
  data () {
    return {
      mode: '',
      url: './rollup.js'
    }
  },
  computed: {},
  watch: {},
  created () {
    this.mountCom1(this.url)
  },
  mounted () {

  },
  methods: {

    async mountCom (url) {
      // 模拟node环境
      window.module = {}
      window.exports = {}

      // 下载远程js
      await scriptLoad(url)

      // 挂载在mode
      this.mode = window.module.exports

      // 清除
      delete window.module
      delete window.exports
    },

    /**
     * 约定名字引入
     */
    async mountCom1 (url) {
      // 下载远程js
      await scriptLoad(url)
      // 挂载在mode
      this.mode = window.MyComponent
      // 清除MyComponent
      window.MyComponent = null
    }
  }
}
</script>

<style lang="less" scoped></style>
